<template>
	<view class="container">
		<view class="top_text">为了保证账户资金安全，请添加<text>{{tabData.name}}</text>本人持有的银行卡</view>
		<view class="content">
			<view class="label_box">
				<view class="label_name">持卡人</view>
				<input class="xjs-weight-bold" type="text" disabled="disabled" v-model="tabData.name" />
			</view>
			<view class="label_box">
				<view class="label_name">开户行</view>
				<input class="xjs-weight-bold" type="text" placeholder="输入开户行名称" v-model="tabData.branchName" />
			</view>
			<view class="label_box">
				<view class="label_name">银行卡号</view>
				<input class="xjs-weight-bold" type="number" placeholder="输入银行卡号" v-model="tabData.bankcardno" />
			</view>
			<!-- <view class="label_box">
				<view class="label_name">预留手机号</view>
				<input type="number" maxlength="11" placeholder="输入预留手机号" v-model="tabData.tel" />
			</view> -->
			<!-- <view class="label_box">
				<view class="label_name">验证码</view>
				<view class="code_box">
					<input class="code_ipt" placeholder="输入验证码" type="number" v-model="tabData.code" />
					<view>获取验证码</view>
				</view>
			</view> -->
		</view>
		<view @click="handleConfig" :class="['xjs-btn-primary',(!tabData.branchName||!parseInt(tabData.bankcardno))?'xjs-btn-disabled':'','btn_box']">确认添加</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo} = useUserStoreToRefs()
	import { useStudioStoreToRefs } from '@/store/useStudioStore'
	const {studio} = useStudioStoreToRefs()
	import { reactive } from 'vue';
	import api from '@/api'
	import {debounce} from '@/hooks/useFunction'
	let tabData = reactive<any>({
		name: userInfo.value.realName,
		bankcardno: '',
		branchName: '',
		btnAct:false
	})
	const backDebounce = debounce(3000)
	const handleConfig = () => {
	  backDebounce(() => {
	    addCardBtn()
	  })
	}
	onShow(()=>{
		uni.setNavigationBarTitle({
			title: '银行卡管理'
		});
	})
	const addCardBtn = async () => {
		if (!tabData.branchName) {
			uni.showToast({
				title: '请输入开户行名称',
				icon: 'none'
			})
			return
		}
		if (!tabData.bankcardno) {
			uni.showToast({
				title: '请输入银行卡号',
				icon: 'none'
			})
			return
		}
		// if (!tabData.branchName) {
		// 	uni.showToast({
		// 		title: '请输入预留手机号',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		// if(tabData.branchName&&tabData.branchName&&tabData.branchName){
		// 	tabData.btnAct = true
		// }
		const res : any = await api({
			method: 'post',
			url: `/mall/bank-card/v2`,
			data: tabData
		})
		if(res.code=='0'){
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			})
			if(!userInfo.value.paymentPassword){
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pages/myStudio/studio/setPaymentPassword/index'
					})
				},1500)
			}else{
				uni.navigateBack({
					delta: 1
				});
			}
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.lf {
		display: flex;
	}

	.lf-between {
		justify-content: space-between;
	}

	.lf-center {
		align-items: center;
	}

	.container {
		padding-bottom: var(--safe-area-bottom);
	}

	.top_text {
		margin: 42rpx 0 40rpx 32rpx;
		color: #7C807F;
		font-size: 24rpx;

		text {
			color: #FF6084;
		}
	}

	.content {
		font-size: 30rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		margin: 0 32rpx;
		padding-bottom: 64rpx;

		.label_box {
			display: flex;
			align-items: center;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #E4E6E6;
			padding: 70rpx 0 26rpx 0;

			.label_name {
				width: 160rpx;
				margin-right: 72rpx;
			}

			.code_box {
				width: 400rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.code_ipt {
				width: 150rpx;
			}
		}
	}

	.btn_box {
		width: 686rpx;
		margin-top: 40rpx;
		margin-left: 32rpx;
	}
</style>